<template>
  <div class="home-page">
		<div class="container">
			<side-bar-component></side-bar-component>
			<div class="wrapper">
				<header-component></header-component>
				<div class="main-container">
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import SideBarComponent from "@/components/SideBarComponent";
import HeaderComponent from "@/components/HeaderComponent";
	
export default {
	components: {
		SideBarComponent,
		HeaderComponent,
	},
}
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");

//页面公共属性设置
/* 选择文档的根元素（HTML 中的 <html>） */
:root {
	--delay: 0s;
	--body-font: "Inter", sans-serif;
	--body-color: #808191;
	--theme-bg: #1f1d2b;
	--border-color: rgb(128 129 145 / 24%);
	--button-bg: #353340;
	--video-bg: #252936;
}

.anim {
	animation: bottom .8s var(--delay) both;
}
@keyframes bottom {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.home-page {
	font-family: var(--body-font);
	color: var(--body-color);
	background-image: url("./assets/full-background.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode: color-dodge;
	background-color: rgba(18, 21, 39, 0.86);
	padding: 1em 2em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	&:before {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(
			163deg,
			rgba(31, 29, 43, 1) 21%,
			rgba(31, 29, 43, 0.3113620448179272) 64%
		);
		opacity: 0.4;
		content: "";
	}
	.container {
		width: 100%;
		max-width: 1240px;
		height: 95vh;
		max-height: 900px;
		background-color: var(--theme-bg);
		border-radius: 20px;
		overflow: hidden;
		display: flex;
		position: relative;
		font-size: 15px;
		font-weight: 500;
		box-shadow: 0px 20px 50px rgba(0, 0, 0, .3);
		.wrapper {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			.main-container {
				flex-grow: 1;
				padding: 0 30px 30px;
				overflow: auto;
				display: flex;
				flex-direction: column;
			}
		}
	}
}

//浏览器滑动条
::-webkit-scrollbar {
	width: 6px;
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: rgb(21 20 26 / 63%);
}
</style>
